<html>
<head>
<title>HTML Storage Examples</title>
<script language="javascript" type="text/javascript" src="../src/proton.db.js"></script>
<script language="javascript" type="text/javascript">

		function saveData() {
			json = getDataToAdd()
			proton.db('data').save(json)
			getStoredDataElement().innerHTML = '<b>Save</b><br/>' + JSON.serialize(json)
		}

		function listData() {
			getStoredDataElement().innerHTML = '<b>List</b><br/>' + JSON.serialize(proton.db('data').all())
		}

		function firstData() {
			getStoredDataElement().innerHTML = '<b>First</b><br/>' + JSON.serialize(proton.db('data').findOne())
		}

		function clearData() {
			proton.db('data').clear()
			getStoredDataElement().innerHTML = '<b>Clear</b><br/>' 
		}
		
		function findData() {
			getStoredDataElement().innerHTML = '<b>Find</b><br/>' + JSON.serialize(proton.db('data').find(getDataToAdd()))
		}

		function getStoredDataElement() {
			return document.getElementById('storedData')
		}

		function getDataToAdd() {
			eval('data = ' + document.getElementById('data').value)
			return data
		}

	</script>
</head>
<body>

<textarea rows="20" cols="100" id="data">{ name: 'Guy Royse', status: 'Trained', skills: [{ name: 'Java', rank: 4 },{ name: 'JavaScript', rank: 4 },{ name: 'Ruby', rank: 3 }]}</textarea>

<br/>

<input type="button" onClick="saveData()" value="Save" />
<input type="button" onClick="listData()" value="List" />
<input type="button" onClick="firstData()" value="First" />
<input type="button" onClick="clearData()" value="Clear" />
<input type="button" onClick="findData()" value="Find" />

<br />
<br />

<div id="storedData"></div>

</body>
</html>